<template>
  <a-drawer
    wrapClassName="data-drawer"
    :destroyOnClose="true"
    :title="title"
    placement="right"
    :visible="visible"
    :width="800"
    @close="onClose"
  >
    <div class="data-drawer-wrap">
      <div class="data-drawer-con">
        <slot />
      </div>
    </div>
    <div class="data-drawer-footer">
      <slot name="footer" />
    </div>
  </a-drawer>
</template>
<script>
export default {
  name: "DataDrawer",
  data() {
    return {};
  },
  props:['title','visible'],
  created() {},
  methods: {
    onClose() {
      this.visible = false
      this.$emit('close', this.visible)
    }
  },
};
</script>

<style lang="less">
@height: 30px;
@fontSize: 12px;
.data-drawer {
  .ant-tabs-nav-container,
  .ant-table,
  .ant-pagination,
  .data-form-item-select {
    font-size: @fontSize;
  }
  .ant-form-item-control {
    line-height: @height;
  }
  .ant-drawer-wrapper-body {
    background: #f1f5f9;
  }
  .ant-drawer-body {
    padding: 0;
  }
  .ant-select-selection,
  .ant-form label,
  .ant-input-number-input,
  .ant-input,
  .cyou-btn span,
  .ant-radio-button-wrapper span,
  .cyou-select-panel-moduler-header-title,
  .cyou-select-panel-item-name {
    font-size: @fontSize;
  }
  .ant-input-number,
  .ant-input-number-input {
    height: @height;
  }
  .ant-form-item {
    margin-bottom: 16px;
  }
  .ant-form-item-label {
    // 导致data-form-item中label部分始终左对齐, labelAlign 属性无法控制
    /*text-align: left;*/
    line-height: @height;
  }

  .data-form-item-upload-alert {
    padding-top: 5px;
  }
  .cyou-btn {
    width: 96px;
    height: @height;
    padding: 0;
  }
  .ant-radio-button-wrapper {
    width: 96px;
    height: @height;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .ant-radio-group {
    display: flex;
    flex-wrap: wrap;
  }
  .cyou-select-panel-item {
    padding: 3px 12px;
  }
  .cyou-checkbox .cyou-checkbox-input-wrapper {
    margin-top: 0;
  }
  label.ant-radio-wrapper {
    height: @height;
    display: inline-flex;
    align-items: center;
  }
}
.data-drawer-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  padding: 0 25px;
  border-top: 1px solid #e9e9e9;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: #fff;
  text-align: right;
  z-index: 1;
}
.data-drawer-wrap {
  background: #f1f5f9;
  padding: 16px 24px;
  .data-drawer-con {
    padding: 20px 30px;
    background: #fff;
    overflow-y: auto;
    height: calc(100vh - 150px);
    border-radius: 4px;
  }
}
</style>
